<script setup>
	import {
		onMounted,
		ref
	} from 'vue';
	import {
		useRoute
	} from 'vue-router'
	import {
		navigateBack,
		redirectToMemorialHall,
	} from "@/assets/scripts/navigate.js"
	import {
		addOfferingListApi,
		getEverlastingLampApi,
	} from "@/assets/api/other/memorialHall.js"
	import {
		getCoupletListApi,
	} from "@/assets/api/other/lantern.js"

	const meMemorialId = ref('')
	const popup = ref()
	const left = ref('')
	const right = ref('')
	const current = ref(-1)
	const listCurrent = ref(0)
	const keyList = ref([])

	const list = [{
		value: '18',
		date: '7',
		label: '点亮七天',
	}, {
		value: '38',
		date: '30',
		label: '点亮一个月',
	}, {
		value: '88',
		date: '180',
		label: '点亮半年',
	}, {
		value: '168',
		date: '365',
		label: '点亮一年',
	}, {
		value: '288',
		date: '-1',
		label: '永久点亮',
	}]

	const handleSelect = (index, item) => {
		current.value = index
		left.value = item.leftt
		right.value = item.rightt
	}

	const handleLantern = async () => {
		if (left.value === '' || right.value === '') {
			uni.showToast({
				title: '请填写',
				icon: 'error'
			})
			return
		}
		popup.value.open()
	}

	const handleSubmit = async () => {
		const res = await addOfferingListApi({
			// businessId: everlastingLampList.value[current.value].id,
			meMemorialId: meMemorialId.value,
			memorialValue: list[listCurrent.value].value,
			ocNum: list[listCurrent.value].value,
			ocTotay: list[listCurrent.value].date,
			// olImg: everlastingLampList.value[current.value].elImg,
			olName: `${left.value},${right.value}`,
			olType: '灯笼',
		})
		if (res.code === 200) {
			uni.showToast({
				title: "挂灯笼成功",
				duration: 2000,
				complete: () => {
					setTimeout(() => {
						redirectToMemorialHall(meMemorialId.value, 1)
					}, 3000)
				}
			})
		} else {
			uni.showToast({
				title: '余额不足请充值!',
				icon: 'error',
			})
		}
	}

	onMounted(() => {
		route_init()
		keyList_init()
	})

	const route_init = async () => {
		const route = useRoute()
		if (route.query.meMemorialId && route.query.meMemorialId !== 'undefined') {
			meMemorialId.value = route.query.meMemorialId
		}
	}

	const keyList_init = async () => {
		const res = await getCoupletListApi()
		if (res.code === 200) {
			keyList.value = res.rows
		}
	}
</script>

<template>
	<view class="">
		<uv-navbar :fixed="false" bgColor="#f5f5f5" @leftClick="navigateBack" title="点亮灯笼">
		</uv-navbar>
		<view class="d-flex pr-normal">
			<view class="d-flex-fx1">
				<view class="p-normal">
					<view class="mt-normal">
						请填写左边灯笼上的四个字
					</view>
					<uv-input class="mt-small" placeholder="例如:家国兴旺" v-model="left" border="surround"
						clearable></uv-input>
					<view class="mt-normal">
						请填写左边灯笼上的四个字
					</view>
					<uv-input class="mt-small" placeholder="例如:万象皆安" v-model="right" border="surround"
						clearable></uv-input>
					<view class="mt-big">
						推荐使用(点击可自动填写)
					</view>
					<view class="px-normal">
						<view class="d-flex d-flex-aic mt-small" v-for="(item, index) in keyList" :key="index"
							@click="handleSelect(index, item)">
							<uv-icon class="mr-small" name="checkmark-circle-fill" size='20'
								:color="current === index ? '#4caf50' : '#aaaaaa'"></uv-icon>
							<text>{{item.leftt}},{{item.rightt}}</text>
						</view>
					</view>
				</view>

				<view class="height"></view>

				<uv-popup ref="popup" mode="bottom">
					<view class="popup-box">
						<view class="head">
							<view class="font-fs18 title">
								挂灯笼
							</view>
							<view class="close-btn" @click="popup.close()">
								关闭
							</view>
						</view>
						<view class="body">
							<view :class="['item',{'con':listCurrent===index}]" v-for="(item, index) in list"
								:key="index" @click="listCurrent=index">
								{{item.label}}({{item.value}}缅怀币)
								<view class="flow-right" v-show="listCurrent===index">
									<uv-icon name="checkmark-circle-fill" size='20' color="#d84444"></uv-icon>
								</view>
							</view>
						</view>

						<view class="foot" @click="handleSubmit">
							确认购买
						</view>
					</view>
				</uv-popup>


				<view class="px-normal submit-btn">
					<uv-button @click="handleLantern" type="success" text="挂灯笼" color="#0cb269"></uv-button>
				</view>
			</view>
			<view class="d-flex-fs0 preview pt-normal">
				<view class="lantern">
					<image src="@/assets/pic/lantern.png" class="image image-fill-x" mode="widthFix"></image>
					<text class="text">{{left.slice(0,4)}}</text>
				</view>
				<view class="lantern">
					<image src="@/assets/pic/lantern.png" class="image image-fill-x" mode="widthFix"></image>
					<text class="text">{{right.slice(0,4)}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<style lang="scss" scoped>
	.preview {
		width: 50px;

		.lantern {
			position: relative;

			.text {
				position: absolute;
				top: 32px;
				left: 0;
				display: block;
				right: 0;
				margin: auto;
				color: #fff;
				width: 1em;
				height: 4em;
				font-size: 12px;
				word-break: break-all;
				transform: scale(.8);
			}
		}
	}

	.submit-btn {
		position: fixed;
		bottom: 5px;
		left: 0;
		right: 0;
	}

	.box {
		.item {}
	}

	.height {
		height: 45px;
	}

	.popup-box {
		.head {
			background-image: linear-gradient(#02c295, #3b9cfe, #1fafca);
			color: #fff;
			height: 40px;
			position: relative;

			.title {
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				display: flex;
				align-items: center;
				margin: auto;
				width: max-content;
			}

			.close-btn {
				border-radius: 10px;
				background-color: #d74444;
				width: 65px;
				height: 28px;
				display: flex;
				align-items: center;
				justify-content: center;
				top: 0;
				bottom: 0;
				right: 20px;
				margin: auto;
				position: absolute;
			}
		}

		.body {

			.item {
				display: flex;
				justify-content: center;
				align-items: center;
				height: 40px;
				color: #666666;
				position: relative;
				border-bottom: 1px solid #ebebeb;

				.flow-right {
					position: absolute;
					right: 20px;
					top: 0;
					bottom: 0;
					margin: auto;
					height: max-content;
				}

				&.con {
					color: #d84444;
				}
			}
		}

		.foot {
			background-color: #d84444;
			color: #fff;
			height: 40px;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
</style>